<template>
    <div class="search-box">
        <div class="position bottom_border">
            <div class="city" @click="cityClick">{{ currentCity.cityName }}</div>
            <div class="location">
                <span>我的位置</span>
                <img src="@/assets/img/home/icon_location.png" alt="">
            </div>
        </div>
        <div class="date bottom_border" @click="dateClick">
            <div class="start">
                <span class="text">入住</span>
                <span class="time">{{ formatTime(startDate) }}</span>
            </div>
            <div class="stay">共1晚</div>
            <div class="end">
                <span class="text">离店</span>
                <span class="time">{{ formatTime(endDate) }}</span>
            </div>
        </div>
        <van-calendar v-model:show="isShowCalendar"
                      :show-confirm="false" type="range"
                      @confirm="onConfirm"  />
        <div class="price-crowd bottom_border">
            <div class="price">价格不限</div>
            <div class="crowd">人数不限</div>
        </div>
        <div class="keyword bottom_border">关键字/位置/民宿名</div>
        <div class="hot-suggests">
            <template v-for="item in hotSuggests">
                <span class="item"
                      :style="{color:item.tagText.color,background:item.tagText.background.color}">
                      {{ item.tagText.text }}
                </span>
            </template>
        </div>
        <div class="search-btn" @click="searchClick">开始搜索</div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import useCityStore from "@/store/modules/city";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import sueMainStore from "@/store/modules/main.js"
import formatTime from "@/utils/formatTime"
import useHomeStore from "@/store/modules/home.js"

const router = useRouter()
function cityClick() {
    router.push("/city")
}

const cityStore = useCityStore()
const { currentCity } = storeToRefs(cityStore)

const mainStore = sueMainStore()
const { startDate,endDate } = storeToRefs(mainStore)
const isShowCalendar = ref(false)
function dateClick() {
    isShowCalendar.value = true
}

function onConfirm(values) {
    const [ start, end ] = values
    startDate.value = start
    endDate.value = end
    isShowCalendar.value = false
}

const homeStore = useHomeStore()
homeStore.fetchHotSuggestsAction()
const { hotSuggests } = storeToRefs(homeStore)

function searchClick() {
    router.push("/search")
}
</script>


<style lang='less' scoped>
.search-box {
    .position {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .city {
            font-size: 14px;
        }
        .location {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #666;
            img {
                width: 20px;
                margin-left: 5px;
            }
        }
    }
    .date {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .start {
            display: flex;
            flex-direction: column;
            .text {
                font-size: 12px;
                color: #888;
            }
        }
        .stay {
            font-size: 12px;
            color: #888;
        }
        .end {
            display: flex;
            flex-direction: column;
            .text {
                font-size: 12px;
                color: #888;
            }
        }
    }
    .price-crowd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #888;
        font-size: 14px;
    }
    .keyword {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #888;
    }
    .hot-suggests {
        margin: 10px 0;
        padding: 0 18px;
        display: flex;
        flex-wrap: wrap;
        .item {
            padding: 4px 8px;
            border-radius: 10px;
            margin: 6px 10px 6px 0;
            font-size: 12px;
        }
    }
    .search-btn {
        height: 44px;
        text-align: center;
        line-height: 44px;
        color: #fff;
        background-color: orange;
        border-radius: 26px;
        margin: 0 18px;
    }
    .bottom_border {
        border-bottom: 1px solid #f4f4f4;
        height: 44px;
        padding: 0 18px;
    }
}
</style>